import { h } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';
import Ref from '@/views/Base/01-Ref';

const routes = [
    {
        path: '/',
        name: 'Ref',
        component: Ref,
    },
    {
        path: '/reactive',
        name: 'Reactive',
        component: () => import('@/views/Base/02-Reactive'),
    },
    {
        path: '/teleport',
        name: 'Teleport',
        component: () => import('@/views/Base/03-Teleport'),
    },
    {
        path: '/emits',
        name: 'Emits',
        component: () => import('@/views/Base/04-Emits'),
    },
    {
        path: '/vmodel',
        name: 'Vmodel',
        component: () => import('@/views/Base/05-Vmodel'),
    },
    {
        path: '/ref',
        name: 'refDom',
        component: () => import('@/views/Base/06-refDom'),
    },
    {
        path: '/watch',
        name: 'Watch',
        component: () => import('@/views/Base/07-watch'),
    },
    {
        path: '/watchEffect',
        name: 'WatchEffect',
        component: () => import('@/views/Base/08-watchEffect'),
    },
    {
        path: '/api',
        name: 'API',
        component: () => import('@/views/Imporve/01-render'),
    },
    {
        path: '/emit',
        name: 'Emit',
        component: () => import('@/views/Imporve/02-emit'),
    },
    {
        path: '/axios',
        name: 'Axios',
        component: () => import('@/views/Imporve/03-ajax'),
    },
    {
        path: '/msgbox',
        name: 'Msgbox',
        component: () => import('@/views/Imporve/04-msgbox'),
    },
    {
        path: '/attrs',
        name: 'Attrs',
        component: () => import('@/views/Imporve/05-attrs'),
    },
    {
        path: '/provide',
        name: 'Provide',
        component: () => import('@/views/Imporve/06-provide'),
    },
];

const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),
    routes,
});

// 特性: 动态路由
router.addRoute(
    {
        path: '/Dashboard',
        name: 'Dashboard',
        component: () => import('@/components/Dashboard.vue'),
    },
);

router.addRoute('Dashboard', {
    path: '/Dashboard/info',
    name: 'info',
    component: {
        render () {
            return h('div', 'info page');
        },
    },
});

export default router;
